<template>
  <div>
    <div class="top">
      <div class="avatar">
        <van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="1"/>
      </div>
      <div class="sub">
        <van-button plain hairline type="info" size="mini" @click="toSubmit">保存</van-button>
      </div>
    </div>
    <div class="card-list">
      <div class="card info">
        <van-cell-group>
          <van-field v-model="info.name" label="姓名"/>
          <van-cell title="生日" is-link :value="info.birthday" @click="showPop = true"/>
          <van-cell title="我的老师" is-link :value="info.teacher"/>
          <van-cell title="我的课程" is-link :value="info.course"/>
          <!--<van-cell title="我的积分" is-link :value="info.fen"/>-->
          <!--<van-field v-model="info.teacher" label="我的老师"/>-->
          <!--<van-field v-model="info.course" label="我的课程"/>-->
          <!--<van-field v-model="info.fen" label="我的积分"/>-->
        </van-cell-group>
      </div>
      <honor :showAdd="true" class="card" :showClose="true"/>
    </div>
    <van-popup v-model="showPop" position="bottom">
      <van-datetime-picker
        v-model="birthday"
        type="date"
        @cancel="dateCancel"
        @confirm="dateConfirm"
        :min-date="minDate"/>
    </van-popup>
  </div>
</template>

<script>
import honor from '@/components/honor'
import {birthdayHandle} from '@/utils'
import api from '@/api'
export default {
  name: 'my-editor',
  data () {
    return {
      info: {
        name: '',
        birthday: '',
        teacher: '',
        course: ''
      },
      showPop: false,
      minDate: new Date('1900-01-01'),
      user: {},
      birthday: null,
      fileList: [{url: require('@/assets/img/icon-avatar.png'), isImage: true}],
      head_sculpture: null
    }
  },
  methods: {
    dateCancel () {
      this.showPop = false
    },
    dateConfirm (value) {
      this.info.birthday = birthdayHandle(value)
      this.showPop = false
    },

    initUserInfo () {
      api.getUserInfo({
        params: {token: this.user.token},
        callback: res => {
          if (res.data.error_code === 0) {
            let data = res.data.data
            this.info.name = data.name
            this.birthday = new Date(Number(data.birthday))
            this.info.birthday = birthdayHandle(new Date(Number(data.birthday)))
            this.fileList = [{url: data.head_sculpture}]
          }
        }
      })
    },

    afterRead (file) {
      this.head_sculpture = file.file
    },

    toSubmit () {
      let user = JSON.parse(window.sessionStorage.getItem('user'))
      if (!this.head_sculpture && this.info.name === user.name && new Date(this.info.birthday).valueOf().toString() === user.birthday) return
      let formData = new FormData()
      formData.append('id', user.id)
      formData.append('name', this.info.name)
      if (this.head_sculpture) {
        formData.append('head_sculpture', this.head_sculpture)
      }
      formData.append('birthday', new Date(this.info.birthday).valueOf().toString())
      api.perfectInfo({
        params: formData,
        callback: res => {
          if (res.data.error_code === 0) {
            this.$toast.success({
              message: res.data.message,
              duration: 1000,
              forbidClick: true,
              onClose: () => {
                this.initUserInfo()
              }
            })
          }
        }
      })
    }
  },
  components: {
    honor
  },
  created () {
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
    this.initUserInfo()
    this.info.teacher = sessionStorage.getItem('myTeacher')
    this.info.course = sessionStorage.getItem('myCourse')
  }
}
</script>

<style scoped>
  .top{
    height: 100px;
    position: relative;
  }
  .top .avatar{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    top: 50%;
    margin-top: -40px;
    border-radius: 50%;
    overflow: hidden;
  }
  .top .sub{
    position: absolute;
    right: 15px;
    top: 15px;
  }
  .card-list{
    background-color: #F2F2F2;
    padding: 15px;
  }
  .card-list .card{
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
  }
</style>
